<!--<!doctype html>-->
<!--<html>-->

<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />-->
<!--    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">-->
<!--    <title>查询页面</title>-->
<!--    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />-->
<!--    <style type="text/css">-->
<!--        table {-->
<!--            border-collapse: collapse;-->
<!--            width: 100%;-->
<!--            min-width: 600px; /* 新增：设置表格最小宽度，避免内容过窄 */-->
<!--        }-->

<!--        table,-->
<!--        th,-->
<!--        td {-->
<!--            border: 1px solid black;-->
<!--            white-space: nowrap;-->
<!--            overflow-x: scroll; /* 始终显示横向滚动条（即使内容未超出，部分浏览器可能隐藏空滚动条） */-->
<!--            padding: 8px 12px;-->
<!--        }-->

<!--        /* 新增：表格容器样式 */-->
<!--        .table-container {-->
<!--            overflow-x: auto; /* 横向滚动条（仅在内容超出时显示） */-->
<!--            overflow-y: hidden; /* 隐藏纵向滚动条 */-->
<!--            padding: 10px; /* 可选：添加容器内边距 */-->
<!--        }-->

<!--        /* 新增：表格容器样式 */-->
<!--        .table-container {-->
<!--            overflow-x: auto; /* 横向滚动条（仅在内容超出时显示） */-->
<!--            overflow-y: hidden; /* 隐藏纵向滚动条 */-->
<!--            padding: 10px; /* 可选：添加容器内边距 */-->
<!--        }-->
<!--    </style>-->
<!--</head>-->

<!--<body>-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->
<!--<header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">-->
<!--    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">-->
<!--			<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>-->
<!--		</span>-->
<!--    <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white-->
<!--            H-position-absolute H-width-100-percent">查询页面</div>-->
<!--</header>-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->

<!--<div class="H-border-vertical-both-after">-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after" >-->
<!--        <input id="phoneNumber" type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入手机号..." />-->
<!--        <button onclick="queryData()"-->
<!--                style="width: 150px;font-size: 20px;"-->
<!--                class="H-theme-font-color-red H-font-size-25 H-margin-vertical-bottom-16 H-display-block H-theme-background-color-white H-padding-vertical-both-10">查询</button>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 修改：为表格添加外层容器 &ndash;&gt;-->
<!--<div class="table-container">-->
<!--    <div id="resultTableDiv">-->
<!--        &lt;!&ndash; 用于显示查询结果的表格 &ndash;&gt;-->
<!--        <table id="resultTable">-->
<!--            <thead>-->
<!--            <tr>-->
<!--&lt;!&ndash;                <th width="10">姓名</th>&ndash;&gt;-->
<!--&lt;!&ndash;                <th width="10">手机号</th>&ndash;&gt;-->
<!--&lt;!&ndash;                <th width="10">商品</th>&ndash;&gt;-->
<!--&lt;!&ndash;                <th width="10">质保开始</th>&ndash;&gt;-->
<!--&lt;!&ndash;                <th width="10">质保结束</th>&ndash;&gt;-->
<!--&lt;!&ndash;                <th width="10">备注</th>&ndash;&gt;-->

<!--                <th class="col-md-8">姓名</th>-->
<!--                <th class="col-md-11">手机号</th>-->
<!--                <th class="col-md-20">商品</th>-->
<!--                <th class="col-md-14">商家</th>-->
<!--                <th class="col-md-15">质保开始</th>-->
<!--                <th class="col-md-15">质保结束</th>-->
<!--                <th class="col-md-20">备注</th>-->

<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            &lt;!&ndash; 这里默认先展示一些虚拟的近期数据示例 &ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>张三</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>138000000001</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>手机</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2025-01-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2026-01-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>无</td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>李四</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>13800000002</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>电脑</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2025-02-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2026-02-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>无</td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--            &lt;!&ndash; 可根据实际需求调整数据条数 &ndash;&gt;-->
<!--            </tbody>-->
<!--        </table>-->
<!--    </div>-->
<!--</div>-->


<!--<div style="text-align: center; font-size: 12px;margin-top: 200px;">-->
<!--    <label class="text-neutral-600">-->
<!--        <a href="/app/agreement" target="_blank" class="link-primary">《用户服务协议》</a> 与-->
<!--        <a href="/app/agreement" target="_blank" class="link-primary">《隐私政策》</a>-->
<!--    </label>-->
<!--</div>-->

<!--<script src="../../script/H.js" type="text/javascript"></script>-->
<!--<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>-->
<!--<script src="../api.js" type="text/javascript"></script>-->
<!--<script type="text/javascript">-->


<!--    $(function(){-->

<!--        queryData();-->


<!--    });-->


<!--    function queryData() {-->
<!--        var phoneNumber = $('#phoneNumber').val();-->
<!--        $.ajax({-->
<!--            url: '/zbtProductWty/list1',-->
<!--            type: 'POST',-->
<!--            //contentType: 'application/json;charset=utf-8',-->
<!--            dataType: "json",-->
<!--            data: {-->
<!--                mobile: phoneNumber-->
<!--            },-->
<!--            success: function (data) {-->
<!--                if (data.code === 0) {-->
<!--                    // 清空原表格数据-->
<!--                    $('#resultTable tbody').empty();-->
<!--                    var resultList = data.data;-->
<!--                    if(resultList.length > 0){-->
<!--                        resultList.forEach(function (item) {-->
<!--                            $('#resultTable tbody').append('<tr><td>'-->
<!--                                + item.username + '</td><td>'-->
<!--                                + item.mobile + '</td><td>'-->
<!--                                + item.productname + '</td><td>'-->
<!--                                + item.realname + '</td><td>'-->
<!--                                + item.wtystart.substring(0, 10) + '</td><td>'-->
<!--                                + item.wtyend.substring(0, 10) + '</td><td>'-->
<!--                                + item.remark + '</td></tr>');-->
<!--                        });-->
<!--                    }else{-->
<!--                        // 修改：用表格行展示空数据提示（避免破坏表格结构）-->
<!--                        $('#resultTable tbody').append('<tr><td colspan="6" style="text-align: center;">暂无数据！</td></tr>');-->
<!--                    }-->

<!--                } else {-->
<!--                    alert(data.message);-->
<!--                }-->
<!--            },-->
<!--            error: function (xhr, type) {-->
<!--                alert('网络错误，请稍后再试');-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->

<!--</body>-->

<!--</html>-->



<!--<!doctype html>-->
<!--<html>-->

<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />-->
<!--    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">-->
<!--    <title>查询页面</title>-->
<!--    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />-->
<!--    <style type="text/css">-->
<!--        table {-->
<!--            border-collapse: collapse;-->
<!--            width: 100%;-->
<!--            min-width: 600px; /* 新增：设置表格最小宽度，避免内容过窄 */-->
<!--        }-->

<!--        table,-->
<!--        th,-->
<!--        td {-->
<!--            border: 1px solid black;-->
<!--            white-space: nowrap;-->
<!--            overflow-x: scroll; /* 始终显示横向滚动条（即使内容未超出，部分浏览器可能隐藏空滚动条） */-->
<!--            padding: 8px 12px;-->
<!--        }-->

<!--        /* 新增：表格容器样式 */-->
<!--        .table-container {-->
<!--            overflow-x: auto; /* 横向滚动条（仅在内容超出时显示） */-->
<!--            overflow-y: hidden; /* 隐藏纵向滚动条 */-->
<!--            padding: 10px; /* 可选：添加容器内边距 */-->
<!--        }-->


<!--    </style>-->
<!--</head>-->

<!--<body>-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->
<!--&lt;!&ndash;<header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">&ndash;&gt;-->
<!--&lt;!&ndash;    <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100">&ndash;&gt;-->
<!--&lt;!&ndash;			<i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i>&ndash;&gt;-->
<!--&lt;!&ndash;		</span>&ndash;&gt;-->
<!--&lt;!&ndash;    <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white&ndash;&gt;-->
<!--&lt;!&ndash;            H-position-absolute H-width-100-percent">查询页面</div>&ndash;&gt;-->
<!--&lt;!&ndash;</header>&ndash;&gt;-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->

<!--<div class="H-border-vertical-both-after">-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after" >-->
<!--        <input id="phoneNumber"-->
<!--               type="text"-->
<!--               class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-10"-->
<!--               placeholder="请输入手机号..." />-->
<!--        <button onclick="queryData()"-->
<!--                style="width: 150px;font-size: 20px;"-->

<!--                class="H-theme-font-color-red H-font-size-18 H-margin-vertical-bottom-16 H-display-block H-theme-background-color-white H-padding-vertical-both-10">查询</button>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 修改：为表格添加外层容器 &ndash;&gt;-->
<!--<div class="table-container">-->
<!--    <div id="resultTableDiv">-->
<!--        &lt;!&ndash; 用于显示查询结果的表格 &ndash;&gt;-->
<!--        <table id="resultTable">-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <th class="col-md-8">姓名</th>-->
<!--                <th class="col-md-11">手机号</th>-->
<!--                <th class="col-md-20">商品</th>-->
<!--                <th class="col-md-15">质保开始</th>-->
<!--                <th class="col-md-15">质保结束</th>-->
<!--                <th class="col-md-20">备注</th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            &lt;!&ndash; 这里默认先展示一些虚拟的近期数据示例 &ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>张三</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>138000000001</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>手机</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2025-01-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2026-01-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>无</td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--&lt;!&ndash;            <tr>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>李四</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>13800000002</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>电脑</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2025-02-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>2026-02-01</td>&ndash;&gt;-->
<!--&lt;!&ndash;                <td>无</td>&ndash;&gt;-->
<!--&lt;!&ndash;            </tr>&ndash;&gt;-->
<!--            &lt;!&ndash; 可根据实际需求调整数据条数 &ndash;&gt;-->
<!--            </tbody>-->
<!--        </table>-->
<!--    </div>-->
<!--</div>-->

<!--<script src="../../script/H.js" type="text/javascript"></script>-->
<!--<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>-->
<!--<script src="../api.js" type="text/javascript"></script>-->
<!--<script type="text/javascript">-->


<!--    $(function(){-->

<!--        queryData();-->


<!--    });-->


<!--    function queryData() {-->
<!--        var phoneNumber = $('#phoneNumber').val();-->
<!--        $.ajax({-->
<!--            url: '/zbtProductWty/list',-->
<!--            type: 'POST',-->
<!--            //contentType: 'application/json;charset=utf-8',-->
<!--            dataType: "json",-->
<!--            data: {-->
<!--                mobile: phoneNumber-->
<!--            },-->
<!--            success: function (data) {-->
<!--                if (data.code === 0) {-->
<!--                    // 清空原表格数据-->
<!--                    $('#resultTable tbody').empty();-->
<!--                    var resultList = data.data;-->
<!--                    if(resultList.length > 0){-->
<!--                        resultList.forEach(function (item) {-->
<!--                            $('#resultTable tbody').append('<tr><td>'-->
<!--                                + item.username + '</td><td>'-->
<!--                                + item.mobile + '</td><td>'-->
<!--                                + item.productname + '</td><td>'-->
<!--                                + item.wtystart.substring(0, 10)+ '</td><td>'-->
<!--                                + item.wtyend.substring(0, 10) + '</td><td>'-->
<!--                                + item.remark + '</td></tr>');-->
<!--                        });-->
<!--                    }else{-->
<!--                        // 修改：用表格行展示空数据提示（避免破坏表格结构）-->
<!--                        $('#resultTable tbody').append('<tr><td colspan="6" style="text-align: center;">暂无数据！</td></tr>');-->
<!--                    }-->

<!--                } else {-->
<!--                    alert(data.msg);-->
<!--                }-->
<!--            },-->
<!--            error: function (xhr, type) {-->
<!--                alert('网络错误，请稍后再试');-->
<!--            }-->
<!--        });-->
<!--    }-->
<!--</script>-->

<!--</body>-->

<!--</html>-->


<!--<!doctype html>-->
<!--<html>-->

<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />-->
<!--    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">-->
<!--    <title>查询页面</title>-->
<!--    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />-->
<!--    <style type="text/css">-->
<!--        table {-->
<!--            border-collapse: collapse;-->
<!--            width: 100%;-->
<!--            min-width: 900px; /* 调整最小宽度，适配新增的图片列 */-->
<!--        }-->

<!--        table,-->
<!--        th,-->
<!--        td {-->
<!--            border: 1px solid black;-->
<!--            white-space: nowrap;-->
<!--            padding: 8px 12px;-->
<!--            text-align: center; /* 表格内容居中，提升美观度 */-->
<!--        }-->

<!--        /* 表格容器样式 */-->
<!--        .table-container {-->
<!--            overflow-x: auto; /* 横向滚动条（仅内容超出时显示） */-->
<!--            overflow-y: hidden;-->
<!--            padding: 10px;-->
<!--        }-->

<!--        /* 查看图片按钮样式 */-->
<!--        .view-img-btn {-->
<!--            padding: 6px 12px;-->
<!--            background-color: #409EFF;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            border-radius: 4px;-->
<!--            cursor: pointer;-->
<!--            font-size: 14px;-->
<!--        }-->
<!--        .view-img-btn:hover {-->
<!--            background-color: #337ecc; /* 按钮 hover 效果 */-->
<!--        }-->

<!--        /* 图片预览弹窗样式 */-->
<!--        .img-modal {-->
<!--            display: none; /* 默认隐藏 */-->
<!--            position: fixed;-->
<!--            top: 0;-->
<!--            left: 0;-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */-->
<!--            z-index: 9999; /* 确保弹窗在最上层 */-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--        }-->

<!--        .modal-content {-->
<!--            background-color: white;-->
<!--            padding: 20px;-->
<!--            border-radius: 8px;-->
<!--            width: 90%;-->
<!--            max-width: 800px;-->
<!--            position: relative; /* 为关闭按钮提供定位参考 */-->
<!--        }-->

<!--        /* 图片上方的关闭按钮 */-->
<!--        .modal-close-btn {-->
<!--            position: absolute;-->
<!--            top: 10px;-->
<!--            right: 10px;-->
<!--            background-color: rgba(0, 0, 0, 0.5);-->
<!--            color: white;-->
<!--            border: none;-->
<!--            width: 30px;-->
<!--            height: 30px;-->
<!--            border-radius: 50%;-->
<!--            font-size: 18px;-->
<!--            cursor: pointer;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            z-index: 10;-->
<!--        }-->

<!--        .modal-close-btn:hover {-->
<!--            background-color: rgba(0, 0, 0, 0.8);-->
<!--        }-->

<!--        .img-group {-->
<!--            display: flex;-->
<!--            gap: 15px; /* 图片之间的间距 */-->
<!--            flex-wrap: wrap; /* 适配小屏幕，自动换行 */-->
<!--            justify-content: center;-->
<!--            margin: 20px 0;-->
<!--        }-->

<!--        .img-item {-->
<!--            width: 200px;-->
<!--            height: 200px;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            border: 1px solid #eee;-->
<!--            overflow: hidden;-->
<!--            position: relative; /* 为图片内关闭按钮提供定位 */-->
<!--        }-->

<!--        /* 单个图片的关闭按钮 */-->
<!--        .img-close-btn {-->
<!--            position: absolute;-->
<!--            top: 5px;-->
<!--            right: 5px;-->
<!--            background-color: rgba(0, 0, 0, 0.5);-->
<!--            color: white;-->
<!--            border: none;-->
<!--            width: 24px;-->
<!--            height: 24px;-->
<!--            border-radius: 50%;-->
<!--            font-size: 14px;-->
<!--            cursor: pointer;-->
<!--            display: none; /* 默认隐藏，鼠标悬停时显示 */-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            z-index: 5;-->
<!--        }-->

<!--        .img-item:hover .img-close-btn {-->
<!--            display: flex; /* 鼠标悬停图片时显示关闭按钮 */-->
<!--        }-->

<!--        .img-close-btn:hover {-->
<!--            background-color: rgba(255, 0, 0, 0.8);-->
<!--        }-->

<!--        .img-item img {-->
<!--            max-width: 100%;-->
<!--            max-height: 100%;-->
<!--            object-fit: contain; /* 保持图片比例，不拉伸 */-->
<!--        }-->

<!--        .no-img {-->
<!--            color: #999;-->
<!--            font-size: 14px;-->
<!--        }-->

<!--        /* 底部关闭按钮保持不变 */-->
<!--        .close-modal {-->
<!--            padding: 8px 16px;-->
<!--            background-color: #f56c6c;-->
<!--            color: white;-->
<!--            border: none;-->
<!--            border-radius: 4px;-->
<!--            cursor: pointer;-->
<!--            float: right;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->

<!--<body>-->

<!--<div class="H-padding-vertical-bottom-10"></div>-->

<!--<div class="H-border-vertical-both-after">-->
<!--    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">-->
<!--        <input id="phoneNumber"-->
<!--               type="text"-->
<!--               class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-10"-->
<!--               placeholder="请输入手机号..." />-->
<!--        <button onclick="queryData()"-->
<!--                style="width: 150px;font-size: 20px;"-->
<!--                class="H-theme-font-color-red H-font-size-18 H-margin-vertical-bottom-16 H-display-block H-theme-background-color-white H-padding-vertical-both-10">查询</button>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 表格容器 &ndash;&gt;-->
<!--<div class="table-container">-->
<!--    <div id="resultTableDiv">-->
<!--        <table id="resultTable">-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <th class="col-md-8">姓名</th>-->
<!--                <th class="col-md-11">手机号</th>-->
<!--                <th class="col-md-20">商品</th>-->
<!--                <th class="col-md-15">质保开始</th>-->
<!--                <th class="col-md-15">质保结束</th>-->
<!--                <th class="col-md-20">备注</th>-->
<!--                <th class="col-md-12">图片1</th> &lt;!&ndash; 新增图片1列（仅显示“有/无”标识） &ndash;&gt;-->
<!--                <th class="col-md-12">图片2</th> &lt;!&ndash; 新增图片2列 &ndash;&gt;-->
<!--                <th class="col-md-12">图片3</th> &lt;!&ndash; 新增图片3列 &ndash;&gt;-->
<!--                <th class="col-md-15">操作</th> &lt;!&ndash; 新增操作列（查看图片按钮） &ndash;&gt;-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            &lt;!&ndash; 数据将通过JS动态渲染 &ndash;&gt;-->
<!--            </tbody>-->
<!--        </table>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; 图片预览弹窗（默认隐藏） &ndash;&gt;-->
<!--<div class="img-modal" id="imgModal" style="overflow: scroll; height: 120%">-->
<!--    <div class="modal-content">-->
<!--        <h3>图片预览</h3><button class="close-modal" onclick="closeModal()" style="top: 300px;">关闭</button>-->
<!--        <div class="img-group" id="imgPreviewGroup">-->
<!--            &lt;!&ndash; 图片将通过JS动态插入 &ndash;&gt;-->
<!--        </div>-->

<!--    </div>-->
<!--</div>-->

<!--<script src="../../script/H.js" type="text/javascript"></script>-->
<!--<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>-->
<!--<script src="../api.js" type="text/javascript"></script>-->
<!--<script type="text/javascript">-->
<!--    // 页面加载时默认查询一次-->
<!--    $(function(){-->
<!--        queryData();-->
<!--    });-->

<!--    /**-->
<!--     * 查询数据并渲染表格-->
<!--     */-->
<!--    function queryData() {-->
<!--        var phoneNumber = $('#phoneNumber').val();-->
<!--        $.ajax({-->
<!--            url: '/zbtProductWty/list',-->
<!--            type: 'POST',-->
<!--            dataType: "json",-->
<!--            data: { mobile: phoneNumber },-->
<!--            success: function (data) {-->
<!--                if (data.code === 0) {-->
<!--                    // 清空原表格数据-->
<!--                    $('#resultTable tbody').empty();-->
<!--                    var resultList = data.data;-->

<!--                    if (resultList.length > 0) {-->
<!--                        // 渲染每条数据-->
<!--                        resultList.forEach(function (item) {-->
<!--                            // 处理图片标识（有图片显示“✅”，无图片显示“❌”）-->
<!--                            var file1Flag = item.file1 ? '✅' : '❌';-->
<!--                            var file2Flag = item.file2 ? '✅' : '❌';-->
<!--                            var file3Flag = item.file3 ? '✅' : '❌';-->

<!--                            // 拼接表格行-->
<!--                            $('#resultTable tbody').append(`-->
<!--                                <tr>-->
<!--                                    <td>${item.username || ''}</td>-->
<!--                                    <td>${item.mobile || ''}</td>-->
<!--                                    <td>${item.productname || ''}</td>-->
<!--                                    <td>${item.wtystart ? item.wtystart.substring(0, 10) : ''}</td>-->
<!--                                    <td>${item.wtyend ? item.wtyend.substring(0, 10) : ''}</td>-->
<!--                                    <td>${item.remark || '无'}</td>-->
<!--                                    <td>${file1Flag}</td>-->
<!--                                    <td>${file2Flag}</td>-->
<!--                                    <td>${file3Flag}</td>-->
<!--                                    <td>-->
<!--                                        <button class="view-img-btn" onclick="openModal('${item.file1 || ''}', '${item.file2 || ''}', '${item.file3 || ''}')">-->
<!--                                            查看图片-->
<!--                                        </button>-->
<!--                                    </td>-->
<!--                                </tr>-->
<!--                            `);-->
<!--                        });-->
<!--                    } else {-->
<!--                        // 无数据时显示提示-->
<!--                        $('#resultTable tbody').append(`-->
<!--                            <tr>-->
<!--                                <td colspan="10" style="text-align: center;">暂无数据！</td>-->
<!--                            </tr>-->
<!--                        `);-->
<!--                    }-->
<!--                } else {-->
<!--                    alert(data.msg);-->
<!--                }-->
<!--            },-->
<!--            error: function (xhr, type) {-->
<!--                alert('网络错误，请稍后再试');-->
<!--            }-->
<!--        });-->
<!--    }-->

<!--    /**-->
<!--     * 打开图片预览弹窗-->
<!--     */-->
<!--    function openModal(file1, file2, file3) {-->
<!--        var imgGroup = $('#imgPreviewGroup');-->
<!--        imgGroup.empty();-->

<!--        // 处理3张图片-->
<!--        [-->
<!--            { url: file1, name: '图片1' },-->
<!--            { url: file2, name: '图片2' },-->
<!--            { url: file3, name: '图片3' }-->
<!--        ].forEach(function(img, index) {-->
<!--            var imgItem;-->
<!--            if (img.url) {-->
<!--                // 有图片地址：包含单个图片关闭按钮-->
<!--                imgItem = $(`-->
<!--                    <div class="img-item">-->
<!--                        <button class="img-close-btn" onclick="removeImage(${index})">×</button>-->
<!--                        <p style="margin: 0 0 5px 0; font-size: 14px;">${img.name}</p>-->
<!--                        <img src="${img.url}" alt="${img.name}" />-->
<!--                    </div>-->
<!--                `);-->
<!--            } else {-->
<!--                // 无图片地址-->
<!--                imgItem = $(`-->
<!--                    <div class="img-item">-->
<!--                        <p style="margin: 0 0 5px 0; font-size: 14px;">${img.name}</p>-->
<!--                        <span class="no-img">无此图片</span>-->
<!--                    </div>-->
<!--                `);-->
<!--            }-->
<!--            imgGroup.append(imgItem);-->
<!--        });-->

<!--        // 显示弹窗-->
<!--        $('#imgModal').css('display', 'flex');-->
<!--    }-->

<!--    /**-->
<!--     * 移除单个图片-->
<!--     */-->
<!--    function removeImage(index) {-->
<!--        // 获取所有图片项并移除指定索引的图片-->
<!--        const imgItems = $('.img-item');-->
<!--        if (imgItems.length > index) {-->
<!--            imgItems.eq(index).remove();-->

<!--            // 如果所有图片都被移除，自动关闭弹窗-->
<!--            if ($('.img-item').length === 0) {-->
<!--                closeModal();-->
<!--            }-->
<!--        }-->
<!--    }-->

<!--    /**-->
<!--     * 关闭图片预览弹窗-->
<!--     */-->
<!--    function closeModal() {-->
<!--        $('#imgModal').css('display', 'none');-->
<!--    }-->

<!--    // 点击弹窗外部区域关闭弹窗-->
<!--    $('#imgModal').click(function(e) {-->
<!--        if (e.target === this) {-->
<!--            closeModal();-->
<!--        }-->
<!--    });-->
<!--</script>-->

<!--</body>-->

<!--</html>-->



<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>查询页面</title>
<!--    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />-->
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 100%;
            min-width: 900px; /* 调整最小宽度，适配新增的图片列 */
        }

        table,
        th,
        td {
            border: 1px solid black;
            white-space: nowrap;
            padding: 8px 12px;
            text-align: center; /* 表格内容居中，提升美观度 */
        }

        /* 表格容器样式 */
        .table-container {
            overflow-x: auto; /* 横向滚动条（仅内容超出时显示） */
            overflow-y: hidden;
            padding: 10px;
        }

        /* 查看图片按钮样式 */
        .view-img-btn {
            padding: 6px 12px;
            background-color: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .view-img-btn:hover {
            background-color: #337ecc; /* 按钮 hover 效果 */
        }

        /* 图片预览弹窗样式 */
        .img-modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
            z-index: 9999; /* 确保弹窗在最上层 */
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 800px;
            position: relative; /* 为关闭按钮提供定位参考 */
        }

        /* 图片上方的关闭按钮 */
        .modal-close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .modal-close-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .img-group {
            display: flex;
            gap: 15px; /* 图片之间的间距 */
            flex-wrap: wrap; /* 适配小屏幕，自动换行 */
            justify-content: center;
            margin: 20px 0;
        }

        .img-item {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #eee;
            overflow: hidden;
            position: relative; /* 为图片内关闭按钮提供定位 */
            cursor: zoom-in; /* 鼠标悬停显示放大图标 */
        }

        /* 单个图片的关闭按钮 */
        .img-close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            display: none; /* 默认隐藏，鼠标悬停时显示 */
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .img-item:hover .img-close-btn {
            display: flex; /* 鼠标悬停图片时显示关闭按钮 */
        }

        .img-close-btn:hover {
            background-color: rgba(255, 0, 0, 0.8);
        }

        .img-item img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain; /* 保持图片比例，不拉伸 */
            transition: transform 0.3s ease; /* 平滑过渡效果 */
        }

        .no-img {
            color: #999;
            font-size: 14px;
        }

        /* 底部关闭按钮保持不变 */
        .close-modal {
            padding: 8px 16px;
            background-color: #f56c6c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            float: right;
        }

        /* 图片放大查看器样式 */
        .image-zoom-viewer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        .zoom-image-container {
            max-width: 90%;
            max-height: 90%;
            position: relative;
        }

        .zoom-image {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }

        .zoom-close-btn {
            position: absolute;
            top: -40px;
            right: -40px;
            background-color: rgba(255, 255, 255, 0.3);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zoom-close-btn:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        /* 缩放控制按钮 */
        .zoom-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .zoom-btn {
            background-color: rgba(255, 255, 255, 0.3);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zoom-btn:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }


        input[type="date"] {
            position: relative;
            width: 200px;
            height: 36px;
            font-size: 16px;
            padding: 0 10px;
        }
        /* 清除按钮样式 */
        input[type="date"]::-webkit-clear-button {
            -webkit-appearance: none;
            appearance: none;
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.536 10.536L8 8l3.536-3.536-1.414-1.414L8 6.586 4.464 3.05 3.05 4.464 6.586 8l-3.536 3.536 1.414 1.414L8 9.414l3.536 3.536 1.414-1.414z"/></svg>') no-repeat center;
            cursor: pointer;
        }


    </style>
</head>

<body>

<div class="H-padding-vertical-bottom-10"></div>

<div class="H-border-vertical-both-after">
    <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
        <input id="phoneNumber"
               type="text" style="height: 35px;    width: 250px; padding: 0px;"
               class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-10"
               placeholder="请输入手机号..." />

        <br/>

        <!-- 质保日期字段 -->
        <input id="warrantyDate"
               style="height: 36px; top: 2px;    width: 165px;  padding: 0px;" value="全部日期"
               type="date" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="全部时间" />

        <!-- 状态字段 -->
            <select id="zhuangtai"
                    style="height: 38px;  top: 5px;   width: 80px;  padding: 0px;"
                    type="text" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12" placeholder="请输入金额(非必填)...">
                <option value="全部状态">全部状态</option>
                <option value="正常">正常</option>
                <option value="欠款">欠款</option>
                <option value="退货">退货</option>
                <option value="录错">录错</option>
                <option value="其他">其他</option>
            </select>



        <button onclick="queryData()"
                style="margin-left: 5px; width: 60px;font-size: 20px;    position: absolute;height: 38px;"
                class="H-theme-font-color-red H-font-size-18 H-margin-vertical-bottom-16 H-display-block H-theme-background-color-white H-padding-vertical-both-10">查询</button>
    </div>
</div>

<!-- 表格容器 -->
<div class="table-container">
    <div id="resultTableDiv">
        <table id="resultTable">
            <thead>
            <tr>
                <th class="col-md-8">姓名</th>
                <th class="col-md-11">手机号</th>
                <th class="col-md-20">商品</th>
                <th class="col-md-20">金额</th>
                <th class="col-md-15">质保开始</th>
                <th class="col-md-15">质保结束</th>
                <th class="col-md-15">状态</th>
                <th class="col-md-20">备注</th>
                <th class="col-md-12">图片1</th> <!-- 新增图片1列（仅显示“有/无”标识） -->
                <th class="col-md-12">图片2</th> <!-- 新增图片2列 -->
                <th class="col-md-12">图片3</th> <!-- 新增图片3列 -->
                <th class="col-md-15">操作</th> <!-- 新增操作列（查看图片按钮） -->
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过JS动态渲染 -->
            </tbody>
        </table>
    </div>
</div>

<!-- 图片预览弹窗（默认隐藏） -->
<div class="img-modal" id="imgModal" style="overflow: scroll; height: 100%">
    <div class="modal-content">
        <button class="close-modal" onclick="closeModal()" style="height: 120%; top: 500px">关闭</button>
        <h3>图片预览</h3>
        <div class="img-group" id="imgPreviewGroup">
            <!-- 图片将通过JS动态插入 -->
        </div>

    </div>
</div>

<!-- 图片放大查看器（默认隐藏） -->
<div class="image-zoom-viewer" id="imageZoomViewer">
    <div class="zoom-image-container">
        <button class="zoom-close-btn" onclick="closeZoomViewer()" style="right: 10px;">×</button>
        <img id="zoomImage" class="zoom-image" src="" alt="放大查看图片" />
        <div class="zoom-controls">
            <button class="zoom-btn" onclick="zoomOut()">-</button>
            <button class="zoom-btn" onclick="resetZoom()">⟲</button>
            <button class="zoom-btn" onclick="zoomIn()">+</button>
        </div>
    </div>
</div>


<!-- 状态修改弹出层（默认隐藏） -->
<div class="status-modal" id="statusModal" style="
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
">
    <div class="status-modal-content" style="
        background-color: white;
        padding: 30px;
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    ">
        <h3 style="margin-top: 0; text-align: center; color: #333;">修改质保状态</h3>
        <div style="margin: 20px 0;">
            <label style="display: block; margin-bottom: 8px; font-size: 16px; color: #666;">
                当前状态：<span id="currentStatusText" style="color: #333;"></span>
            </label>
            <select id="newStatusSelect" style="
                width: 100%;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 16px;
                color: #333;
                background-color: #fff;
            ">
                <option value="正常">正常</option>
                <option value="欠款">欠款</option>
                <option value="退货">退货</option>
                <option value="录错">录错</option>
                <option value="其他">其他</option>

                <!-- 可根据实际业务需求扩展状态选项 -->
            </select>
        </div>
        <div style="display: flex; gap: 15px; justify-content: center;">
            <button onclick="closeStatusModal()" style="
                padding: 10px 25px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 16px;
                cursor: pointer;
                background-color: #fff;
                color: #666;
            ">取消</button>
            <button onclick="submitNewStatus()" style="
                padding: 10px 25px;
                border: none;
                border-radius: 4px;
                font-size: 16px;
                cursor: pointer;
                background-color: #409EFF;
                color: #fff;
            ">确认修改</button>
        </div>
    </div>
</div>




<script src="../../script/H.js" type="text/javascript"></script>
<script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="../api.js" type="text/javascript"></script>
<script type="text/javascript">
    // 当前缩放比例
    let currentZoom = 1;
    // 图片放大查看器相关元素
    const zoomViewer = $('#imageZoomViewer');
    const zoomImage = $('#zoomImage');

    // 页面加载时默认查询一次
    $(function(){
        queryData();
    });

    /**
     * 查询数据并渲染表格
     */
    function queryData() {
        var phoneNumber = $('#phoneNumber').val();
        var warrantyDate = $('#warrantyDate').val();
        var zhuangtai = $('#zhuangtai').val();

        $.ajax({
            url: '/zbtProductWty/list',
            type: 'POST',
            dataType: "json",
            data: { mobile: phoneNumber , warrantyDate: warrantyDate===''?'全部日期':warrantyDate, zhuangtai: zhuangtai},
            success: function (data) {
                if (data.code === 0) {
                    // 清空原表格数据
                    $('#resultTable tbody').empty();
                    var resultList = data.data;

                    if (resultList.length > 0) {
                        // 渲染每条数据
                        resultList.forEach(function (item) {
                            // 处理图片标识（有图片显示“✅”，无图片显示“❌”）
                            var file1Flag = item.file1 ? '✅' : '❌';
                            var file2Flag = item.file2 ? '✅' : '❌';
                            var file3Flag = item.file3 ? '✅' : '❌';

                            // 拼接表格行
                            $('#resultTable tbody').append(`
                                <tr>
                                    <td>${item.username || ''}</td>
                                    <td>${item.mobile || ''}</td>
                                    <td>${item.productname || ''}</td>
                                    <td>${item.jine || ''}</td>
                                    <td>${item.wtystart ? item.wtystart.substring(0, 10) : ''}</td>
                                    <td>${item.wtyend ? item.wtyend.substring(0, 10) : ''}</td>
                                    <td onclick="updateZhuangtai(this, '${item.zhuangtai || '正常'}', '${item.id || ''}')"
                                        style="cursor: pointer; color: #409EFF;">
                                        ${item.zhuangtai || '正常'}
                                    </td>
                                    <td>${item.remark || '无'}</td>
                                    <td>${file1Flag}</td>
                                    <td>${file2Flag}</td>
                                    <td>${file3Flag}</td>
                                    <td>
                                        <button class="view-img-btn" onclick="openModal('${item.file1 || ''}', '${item.file2 || ''}', '${item.file3 || ''}')">
                                            查看图片
                                        </button>
                                    </td>
                                </tr>
                            `);
                        });
                    } else {
                        // 无数据时显示提示
                        $('#resultTable tbody').append(`
                            <tr>
                                <td colspan="10" style="text-align: center;">暂无数据！</td>
                            </tr>
                        `);
                    }
                } else {
                    alert(data.msg);
                }
            },
            error: function (xhr, type) {
                alert('网络错误，请稍后再试');
            }
        });
    }

    /**
     * 打开图片预览弹窗
     */
    function openModal(file1, file2, file3) {
        var imgGroup = $('#imgPreviewGroup');
        imgGroup.empty();

        // 处理3张图片
        [
            { url: file1, name: '图片1' },
            { url: file2, name: '图片2' },
            { url: file3, name: '图片3' }
        ].forEach(function(img, index) {
            var imgItem;
            if (img.url) {
                // 有图片地址：包含单个图片关闭按钮和点击放大功能
                imgItem = $(`
                    <div class="img-item">
                        <button class="img-close-btn" onclick="removeImage(${index})">×</button>
                        <p style="margin: 0 0 5px 0; font-size: 14px;">${img.name}</p>
                        <img src="${img.url}" alt="${img.name}" onclick="openZoomViewer('${img.url}')" />
                    </div>
                `);
            } else {
                // 无图片地址
                imgItem = $(`
                    <div class="img-item">
                        <p style="margin: 0 0 5px 0; font-size: 14px;">${img.name}</p>
                        <span class="no-img">无此图片</span>
                    </div>
                `);
            }
            imgGroup.append(imgItem);
        });

        // 显示弹窗
        $('#imgModal').css('display', 'flex');
    }

    /**
     * 打开图片放大查看器
     */
    function openZoomViewer(imageUrl) {
        // 设置放大图片的URL
        zoomImage.attr('src', imageUrl);
        // 重置缩放比例
        currentZoom = 1;
        zoomImage.css('transform', `scale(${currentZoom})`);
        // 显示放大查看器
        zoomViewer.css('display', 'flex');
        // 隐藏预览弹窗
        $('#imgModal').css('display', 'none');
    }

    /**
     * 关闭图片放大查看器
     */
    function closeZoomViewer() {
        zoomViewer.css('display', 'none');
        // 重新显示预览弹窗
        $('#imgModal').css('display', 'flex');
    }

    /**
     * 放大图片
     */
    function zoomIn() {
        currentZoom += 0.2;
        if (currentZoom > 3) currentZoom = 3; // 最大放大3倍
        zoomImage.css('transform', `scale(${currentZoom})`);
    }

    /**
     * 缩小图片
     */
    function zoomOut() {
        currentZoom -= 0.2;
        if (currentZoom < 0.5) currentZoom = 0.5; // 最小缩小到0.5倍
        zoomImage.css('transform', `scale(${currentZoom})`);
    }

    /**
     * 重置图片缩放
     */
    function resetZoom() {
        currentZoom = 1;
        zoomImage.css('transform', `scale(${currentZoom})`);
    }

    /**
     * 移除单个图片
     */
    function removeImage(index) {
        // 获取所有图片项并移除指定索引的图片
        const imgItems = $('.img-item');
        if (imgItems.length > index) {
            imgItems.eq(index).remove();

            // 如果所有图片都被移除，自动关闭弹窗
            if ($('.img-item').length === 0) {
                closeModal();
            }
        }
    }

    /**
     * 关闭图片预览弹窗
     */
    function closeModal() {
        $('#imgModal').css('display', 'none');
    }

    // 点击弹窗外部区域关闭弹窗
    $('#imgModal').click(function(e) {
        if (e.target === this) {
            closeModal();
        }
    });

    // 点击放大查看器外部区域关闭
    zoomViewer.click(function(e) {
        if (e.target === this[0]) {
            closeZoomViewer();
        }
    });

    // 支持鼠标滚轮缩放
    zoomImage.on('wheel', function(e) {
        e.preventDefault();
        // 滚轮向上滚动放大，向下滚动缩小
        if (e.originalEvent.deltaY < 0) {
            zoomIn();
        } else {
            zoomOut();
        }
    });









    // 全局变量：存储当前修改状态的表格行和数据ID（需与后端返回的商品ID对应）
    let currentStatusRow = null;
    let currentProductId = null;

    /**
     * 打开状态修改弹出层
     * @param {Object} row - 当前点击的表格行（DOM元素）
     * @param {string} currentStatus - 当前状态值
     * @param {string/number} productId - 商品ID（用于后端更新数据）
     */
    function updateZhuangtai(row, currentStatus, productId) {
        // 存储当前操作的行和商品ID
        currentStatusRow = row;
        currentProductId = productId;

        // 显示当前状态
        $('#currentStatusText').text(currentStatus || '正常');

        // 下拉框默认选中当前状态
        $('#newStatusSelect').val(currentStatus || '正常');

        // 显示弹出层
        $('#statusModal').css('display', 'flex');
    }

    /**
     * 关闭状态修改弹出层
     */
    function closeStatusModal() {
        $('#statusModal').css('display', 'none');
        // 重置全局变量
        currentStatusRow = null;
        currentProductId = null;
    }

    /**
     * 提交新状态到后端并更新表格
     */
    function submitNewStatus() {
        // 获取新选择的状态
        const newStatus = $('#newStatusSelect').val();

        // 1. 前端临时更新表格显示（优化用户体验）
        if (currentStatusRow) {
            // 找到状态列（第6列，索引为5，因为表格列从0开始）
            const statusCell = $(currentStatusRow).find('td').eq(5);
            // 更新显示并添加过渡效果
            statusCell.text(newStatus).css({
                'color': '#409EFF',
                'transition': 'color 0.3s ease'
            });
            // 1秒后恢复默认颜色
            setTimeout(() => {
                statusCell.css('color', '#333');
            }, 1000);
        }

        // 2. 向后端发送请求更新数据（核心逻辑）
        $.ajax({
            url: '/zbtProductWty/updateStatus', // 需替换为后端实际更新接口
            type: 'POST',
            dataType: 'json',
            data: {
                id: currentProductId, // 商品唯一标识，用于后端定位数据
                zhuangtai: newStatus         // 新状态值
            },
            success: function (data) {
                if (data.code === 0) {
                    // 后端更新成功：提示用户
                    alert('状态修改成功！');
                    // 关闭弹出层
                    closeStatusModal();
                    queryData();
                } else {
                    // 后端更新失败：回滚前端显示并提示
                    if (currentStatusRow) {
                        const oldStatus = $('#currentStatusText').text();
                        $(currentStatusRow).find('td').eq(5).text(oldStatus);
                    }
                    alert('状态修改失败：' + (data.msg || '服务器异常'));
                }
            },
            error: function (xhr, type) {
                // 网络错误：回滚前端显示并提示
                if (currentStatusRow) {
                    const oldStatus = $('#currentStatusText').text();
                    $(currentStatusRow).find('td').eq(5).text(oldStatus);
                }
                alert('网络错误，请检查网络连接后重试！');
            }
        });
    }

    // 点击弹出层外部区域关闭
    $('#statusModal').click(function(e) {
        if (e.target === this[0]) {
            closeStatusModal();
        }
    });

   $(function(){

       var dateInput = document.getElementById('warrantyDate');

       // 初始无值时显示自定义文字
       if (!dateInput.value) {
           showPlaceholder();
       }

       // 监听 change：用户选择或清除
       dateInput.addEventListener('change', function () {
           if (!this.value) {
               showPlaceholder();
           } else {
               this.style.color = '';          // 恢复默认颜色
               this.removeAttribute('data-empty');
           }
       });

       // 监听 input：专门捕获清除按钮点击（Chrome/Edge）
       dateInput.addEventListener('input', function () {
           if (!this.value) {
               showPlaceholder();
           }
       });

       function showPlaceholder() {
           dateInput.style.color = 'transparent'; // 隐藏原生 placeholder
           dateInput.setAttribute('data-empty', 'true');
           // 用伪元素显示汉字
           const style = document.createElement('style');
           style.textContent = `
            input[type="date"][data-empty]::before {
                content: "全部日期";
                color: #999;
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
                white-space: nowrap;
            }
        `;
           // 避免重复添加
           if (!document.head.querySelector('style[data-placeholder]')) {
               style.setAttribute('data-placeholder', 'true');
               document.head.appendChild(style);
           }
       }


   });



</script>

</body>

</html>
